<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app" style="border: 1px solid red; padding: 10px;">
        <h1>测试具名插槽</h1>
        <!-- 引入子组件 -->
        <named-slot>
            <p style="color:red" slot="header">传给子组件 header 插槽的内容</p>
            <p style="color:blue" slot="content">传给子组件 content 插槽的内容</p>
            <p style="color:green" slot="footer">传给子组件 footer 插槽的内容</p>
        </named-slot>
    </div>
    <!-- 子组件模板 -->
    <template id="named-slot">
        <div style="border: 1px solid blue; padding: 10px;">
            <slot name="header">头部</slot>
            <slot name="content">默认内容</slot>
            <slot name="footer">底部</slot>
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script>
        // 创建 Vue 实例，并将父组件注册到 Vue 实例中
        const app = new Vue({
            el: '#app',
            components: {
                // 注册子组件
                'named-slot': {
                    template: '#named-slot',
                },

            }
        })
    </script>
</body>

</html>